<script setup>
import {ref} from "vue";
let awesome = ref(true);
let type = ref('B')
let ok = ref(true)
</script>

<template>
<!--  根据响应式变量的值进行不同的渲染-->
  <h1 v-if="awesome">Vue is awesome!</h1>

<!--  else的使用-->
  <button @click="awesome = !awesome">Toggle</button>

  <h1 v-if="awesome">Vue is awesome!</h1>
<!--  必须跟在v-if 或者 v-else-if的后面-->
  <h1 v-else>Oh no 😢</h1>

  <div v-if="type === 'A'">
    A
  </div>
<!--  v-else-if必须跟在v-if 或者 v-else-if的后面-->
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>

<!--  v-show的使用-->
  <h1 v-show="ok">Hello!</h1>

<!--v-if 和 v-show的区别：-->
<!--  1.v-if会重新创建和销毁 而v-show是通过css样式来实现显示和消失-->
<!--  2.v-if是惰性的 只有当条件为true时才会渲染-->
<!--  3.v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。-->
<!--  因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。-->

</template>


<style scoped>

</style>
